<template>
  <div class="cart">
    <div v-if="carts && carts.length > 0">
      <div class="item" v-for="(item, index) in carts" :key="index">
        <img src="@/assets/weixuanzhong.png" @click="checkClick(index)" v-if="!item.check" class="check-box" alt="">
        <img src="@/assets/gouwuche1.png" @click="checkClick(index)" v-else class="check-box" alt="">
        <span class="img"><img v-if="item.img" :src="item.img" class="goods-img" alt=""></span>
        <span class="del" @click="is_show = true, del_id = item.id">删除</span>
        <div class="cons">
          <div class="goods-info">
            <span class="goods-name">{{item.title}}</span>
            <p class="goods-attr">型号：{{item.guige}}</p>
          </div>
          <div class="goods-price">
            <p class="price">￥{{item.price}}</p>
            <div class="operate">
              <span @click="jian(index)"><img src="@/assets/gouwuche2.png"></span>
              <span class="pay_num">{{item.num}}</span>
              <span @click="jia(index)"><img src="@/assets/gouwuche3.png"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed">
        <div class="left">
          <img v-if="!isAll" @click="allCheck" src="@/assets/weixuanzhong.png" class="check-box" alt="">
          <img v-else @click="allCheck" src="@/assets/gouwuche1.png" class="check-box" alt="">
          <span class="all-check">全选</span>
          <span class="fr">应付: <em>¥{{allPrice}}.00</em></span>
        </div>
        <div class="right">去付款</div>
      </div>
    </div>
    <div class="none" v-else>
      <img src="@/assets/kongzhuangtai.png" alt="">
      <p>购物车暂无内容</p>
    </div>
    <div class="mask-div" v-if="is_show">
      <div class="mask-bg" @click="is_show = false"></div>
      <div class="content">
        <img src="@/assets/gouwuche4.png" alt="">
        <p class="tip">是否确认删除该商品</p>
        <div class="btn">
          <span class="left" @click="del()">删除</span>
          <span class="right" @click="is_show = false">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { AlertModule } from 'vux'
import { getCarts, cartDel, cartEdit } from '@/api/api'
export default {
  data () {
    return {
      is_show: false,
      carts: [],
      del_id: '',
      isAll: false,
      allPrice: 0,
    }
  },
  created () {
    this.get_carts()
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    get_carts() {
      getCarts(1).then((res) => {
        console.log(res)
        var data = res.data.info.lists
        for(var i in data){
          data[i].check = false
          this.carts.push(data[i])
        }
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 删除一条数据
    del() {
      this.is_show = false
      cartDel(1, this.del_id).then((res) => {
        AlertModule.show({
          title: '温馨提示',
          content: res.data.info,
          onHide: () => {
            this.get_carts()
          }
        })
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 选中按钮
    checkClick(index) {
      this.carts[index].check = !this.carts[index].check
      this.allPrice = (this.carts[index].check) ? Number(this.carts[index].price) + this.allPrice : this.allPrice - Number(this.carts[index].price)
      var count = 0;
      for(var i in this.carts){
        if(this.carts[i].check){
          count++
        }
      }
      if(count == this.carts.length){
        this.isAll = true
      }else{
        this.isAll = false
      }
    },
    //  全选按钮
    allCheck() {
      this.allPrice = 0
      this.isAll = !this.isAll
      for(var i in this.carts){
        if(this.isAll){
          this.carts[i].check = true
          this.allPrice = Number(this.carts[i].price) + this.allPrice
        }else{
          this.carts[i].check = false
        }
      }
    },
    // 减
    jian(index) {
      if(this.carts[index].num <= 1) {
        return 
      }
      this.carts[index].num--
      if(this.isAll){
        this.allCheck()
      }
      var jsonData = {
        uid: sessionStorage.getItem('uid'),
        cart_id: this.carts[index].id,
        num: this.carts[index].num
      }
      cartEdit(jsonData).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.dir(err)
      })
    },
    // 加
    jia(index) {
      this.carts[index].num++
      if(this.isAll){
        this.allCheck()
      }
      var jsonData = {
        uid: sessionStorage.getItem('uid'),
        cart_id: this.carts[index].id,
        num: this.carts[index].num
      }
      cartEdit(jsonData).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.dir(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
.cart
  padding-bottom 5rem
  box-sizing border-box
  .item
    padding 2rem 0
    margin 0 1.5rem
    display flex
    position relative
    border-top 1px solid #e6e6e6
    &:first-child
      border none
    .check-box
      width 1.6rem
      height 1.6rem
      max-width 1.6rem
      margin-right 1rem
      margin-top 4.2rem
    .img
      min-width 10rem
      height 10rem
      display flex
      margin-right 1rem
      .goods-img
        max-width 10rem
        margin-right 1rem
        object-fit cover
    .del
      font-size 1.2rem
      color #fff
      line-height 2.7rem
      height 2.7rem
      width 10rem
      position absolute
      bottom 2rem
      left 2.6rem
      background-color rgba(0,0,0,.6)
      text-align center
    .cons
      flex 1
      position relative
      .goods-info
        .goods-name
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          font-size 1.7rem
          color #333
          display block
          width calc(100vw - 16rem)
        .goods-attr
          font-size 1.2rem
          color #999
          line-height 2.4rem
          margin-top .5rem
      .goods-price
        .price
          position absolute
          bottom 0
          color #333333
          font-size 1.7rem
          font-weight bold
          line-height 2.5rem
        .operate
          display flex
          flex 1
          position absolute
          right 0
          bottom 0
          span
            display block
            flex 1
            text-align center
            img
              width 2.7rem
              display inline-block
          .pay_num
            border none
            text-align center
            width 4rem
            line-height 2.7rem
            font-size 1.5rem
            color #333
  .fixed
    position fixed
    bottom 0
    height 7rem
    line-height 7rem
    display flex
    width 100%
    background linear-gradient(0deg,rgba(255,255,255,1) 0%)
    padding 1rem
    box-sizing border-box
    .left
      flex 2
      font-size 1.5rem
      color #fff
      line-height 5rem
      height 5rem
      border-radius .4rem 0 0 .4rem
      background-color #171C26
      .all-check
        margin-right 1.5rem
        margin-left 3.9rem
      .fr
        float right
        margin-right 1.8rem
      img
        position absolute
        left 0
        width 1.6rem
        left 2.5rem
        top 2.7rem
      em
        font-size 1.8rem
        font-weight bold
        line-height 2rem
    .right
      flex 1
      background-color #43A047
      color #fff
      font-size 1.8rem
      font-weight bold
      text-align center
      line-height 5rem
      border-radius 0 .4rem .4rem 0  
  .content
    width 78%
    left 11%
    background-color #fff
    border-radius .8rem
    text-align center
    top 15.4rem
    img
      width 13.8rem
      display inline-block
      margin 2.5rem 0
    .tip
      font-size 1.8rem
      line-height 2rem
      color #333
      margin 0 3rem
    .btn
      height 5rem
      line-height 5rem
      display block
      width 100%
      font-size 1.5rem
      text-align center
      border-top 1px solid #e6e6e6
      margin-top 3rem
      overflow hidden
      span
        width 50%
      .left
        float left
        color #666666
        position relative
      .right
        float left
        color #43A047  
  .none
    position absolute
    width 100%
    height 100vh
    overflow hidden
    background-color #f5f7fa
    img
      width 21.5rem
      margin-top 12rem
      position relative
      left 50%
      margin-left -10.75rem
    p
      color #333333
      font-size 1.3rem
      margin-top 4rem
      text-align center
</style>